<template>
	<view style="width: 100vw;height: 100vh;display: flex;flex-direction: column;">
		<view>
			<u-tabs :list="list1" @click="click" sticky
				lineWidth="30"
				lineColor="#f56c6c"
				:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
				:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
		</view>
		<view style="flex: 1;background-color: #F7F7F7;overflow: hidden;">
			<scroll-view :scroll-y="true" style="width: 100%;height: 100%;">
				<view style="width: 100%;padding: 20rpx 20rpx 0 20rpx;box-sizing: border-box;">
					<view @click="orderItemClick(item)" v-for="item in orderList" :key="item.orderId" style="display: flex;flex-direction: column;width: 100%;box-sizing: border-box;padding: 20rpx;border-radius: 20rpx;background-color: #fff;margin-bottom: 20rpx;">
						<view style="display: flex;align-items: center;">
							<view style="flex: 1;display: flex;align-items: center;">
								<u-icon name="order" size="20"></u-icon>	
								<view style="margin-right: 10px;">{{item.name}}</view>	
								<view style="margin-right: 10px;">{{item.number}}</view>
								<view>{{item.isSelfMention ==1? "自提":"配送"}}</view>
							</view>
							<view style="color: red;">{{item.status.desc}}</view>
						</view>
						<view style="font-size: 3vw;">{{$u.timeFormat($timeStamp(item.createTime),'yyyy-mm-dd hh:MM:ss')}}</view>
						<view style="display: flex;margin-bottom: 10px;" v-for="citem in item.storeOrderCommodityDetailsDTOList" :key="citem.commodityDetailsId">
							<image :src="citem.image.length>0?ptUrl+citem.image:'#'" style="flex-basis: 167.5rpx;height: 167.5rpx;"></image>
							<view style="flex: 1;display: flex;flex-direction: column;padding: 10px;box-sizing: border-box;overflow: hidden;">
								<view style="margin-bottom: 10px;">{{citem.commodityName}}</view>
								<view style="display: flex;" v-if="citem.isMultiSpecification ==1">
									<view v-for="gitem in citem.groupValueList" :key="gitem.groupValueId" style="margin-right: 10px;">
										<u-tag :text="gitem.groupValueName" color="rgba(0,0,0,0.7)" bgColor="#f7f7f7" borderColor="transparent"></u-tag>
									</view>		
								</view>
								<view v-else style="display: flex;">
									<view style="margin-right: 10px;">
										<u-tag text="默认" color="rgba(0,0,0,0.7)" bgColor="#f7f7f7" borderColor="transparent"></u-tag>
									</view>
								</view>
							</view>
							<view style="display: flex;flex-direction: column;justify-content: center;">
								<view>￥{{citem.unitPrice}}</view>
								<view>数量x{{citem.quantity}}</view>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;margin: 0 0 10px 0;">
							<view>实付款￥{{item.allPrice}}</view>
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<view @click.stop="refund(item)" style="flex-basis: 180rpx;margin-right: 10px;" v-if="(item.status.code == 1||item.status.code == 5)&&!item.evaluateId">
								<u-button color="#000" size="small" :plain="true" text="申请退款"></u-button>
							</view>
							<view @click.stop="cancelRefund(item.orderId)" style="flex-basis: 180rpx;margin-right: 10px;" v-if="item.status.code == -1">
								<u-button color="#000" size="small" :plain="true" text="取消退款"></u-button>
							</view>
							<view @click.stop="receiving(item.orderId)" style="flex-basis: 180rpx;margin-right: 10px;" v-if="item.status.code == 2||item.status.code == 4">
								<u-button color="#ff0000" size="small" :plain="true" text="确认收货"></u-button>
							</view>
							<view @click.stop="evaluate(item)" style="flex-basis: 180rpx;margin-right: 10px;" v-if="item.status.code == 5 && !item.evaluateId">
								<u-button color="#ff0000" size="small" :plain="true" text="立即评价"></u-button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :line="true" :marginTop="20" :marginBottom="20"
				@loadmore="loadmore" loadmoreText="点击加载更多"></u-loadmore>
				<u-popup :show="applyForRefundPopup" :round="10" @close="applyForRefundPopupClose">
					<view style="width: 100%;padding: 20rpx;box-sizing: border-box;">
						<view style="text-align: center;font-weight: bold;">申请退款</view>
						<u--form
							labelPosition="left"
							labelAlign="center"
							:model="applyForRefundPopupForm"
							:rules="applyForRefundPopupFormRules"
							ref="applyForRefundPopupForm"
							labelWidth="70"
						>
							<u-form-item
								label="订单号"
								prop="number"
								borderBottom
							>
								<u--input
									v-model="applyForRefundPopupForm.number" disabled
									border="none"
								></u--input>
							</u-form-item>
							<u-form-item
								label="退款原因"
								prop="message"
								borderBottom
							>
								<u--textarea
									placeholder="必填,请您详细填写申请说明"
									v-model="applyForRefundPopupForm.message"
									count
								></u--textarea>
							</u-form-item>
						</u--form>
						<u-button
							type="primary"
							text="提交申请"
							customStyle="margin-top: 20px"
							@click="refundCommit"
						></u-button>
					</view>
				</u-popup>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		ptUrl,
	} from '@/utils/env.js'
	export default {
		data() {
			return {
				ptUrl: ptUrl,
				list1: [{
					name: '今日订单',
				}, {
					name: '历史订单',
				}],
				status:"loadmore",//loading / nomore
				orderList:[],
				current:1,
				isNowDay:1,
				applyForRefundPopup:false,//申请退款popup
				applyForRefundPopupForm:{},
				applyForRefundPopupFormRules:{
					'message': {
						type: 'string',
						required: true,
						message: '必填,请您详细填写申请说明',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onShow() {
			this.orderList = []
			this.current = 1;
			this.getAllOrder();
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.applyForRefundPopupForm.setRules(this.applyForRefundPopupFormRules)
			
		},
		methods: {
			evaluate(item){
				uni.navigateTo({
				    url: '/pages/order/orderEvaluate?data='+JSON.stringify({orderId:item.orderId,number:item.number})
				});
			},
			cancelRefund(orderId){
				uni.showModal({
				    title: '取消退款申请',
				    content: '是否确认取消申请退款?',
				    success: res => {
				        if (res.confirm) {
							this.$http("/order/cancelApplicationForRefund","get",{orderId}).then(()=>{
								this.orderList = []
								this.current = 1;
								this.getAllOrder();
							})
				        } 
				    }
				});
			},
			applyForRefundPopupClose(){
				this.applyForRefundPopup = false
				this.$refs.applyForRefundPopupForm.clearValidate();
			},
			refund(item){
				console.log("申请退款",item)
				this.applyForRefundPopup = true
				this.applyForRefundPopupForm = {
					message:"",
					number:item.number,
					orderId:item.orderId,
				}
			},
			refundCommit(){
				this.$refs.applyForRefundPopupForm.validate().then(res => {
					uni.showModal({
					    title: '退款',
					    content: '是否确认申请退款?',
					    success: res => {
					        if (res.confirm) {
								this.$http("/order/applyForRefund","POST",this.applyForRefundPopupForm).then(()=>{
									this.orderList = []
									this.current = 1;
									this.getAllOrder();
									this.applyForRefundPopup = false
								})
					        } 
					    }
					});
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			receiving(id){
				// console.log("确定收货",id)
				uni.showModal({
				    title: '收货',
				    content: '是否确定收货?',
				    success: res => {
				        if (res.confirm) {
							this.updateOrderStautsByOrderId(id,5);
				        } 
				    }
				});
			},
			click(item) {
				console.log('item', item);
				this.orderList = []
				this.isNowDay = item.index == 0? 1:0;
				this.current = 1;
				this.getAllOrder();
			},
			loadmore(){
				console.log("loadmore")
				if(this.status == "nomore"){
					return;
				}
				this.status = "loading" 
				this.current = this.current+1
				this.getAllOrder();
			},
			orderItemClick(item){
				uni.navigateTo({
				    url: '/pages/order/orderDetails?data='+JSON.stringify(item)
				});
			},
			getAllOrder(){
				let data = {
					current:this.current,
					isNowDay:this.isNowDay
				}
				this.$http("/order/getAllOrder", "get", data).then(res => {
					if(res.data.data.length < 5){
						this.status = "nomore" 
					}else{
						this.status = "loadmore" 
					}
					if(res.data.data.length == 0){
						return;
					}
					this.orderList = [...this.orderList,...res.data.data]
				})
			},
			updateOrderStautsByOrderId(orderId,status){
				this.$http("/order/updateOrderStautsByOrderId","get",{orderId,status}).then(()=>{
					this.orderList = []
					this.current = 1;
					this.getAllOrder();
				})
			}
		}
	}
</script>

<style>
</style>
